<template>
  <div class="page">
    <div>
      <div class="selectData">
        <span style="margin-right:10px;">季度:</span>
        <el-select
          size="small"
          class="userIntSize"
          v-model="quarters"
          clearable
          placeholder="请选择季度"
          @change="getQuartersId"
        >
          <el-option
            v-for="item in quarterArray"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <span style="margin-left:20px;margin-right:6px;font-size:14px;">重点工作:</span>
        <el-cascader
          ref="taskRef"
          class="userIntSize"
          v-model="taskId"
          :options="taskLists"
          :props="taskProp"
          size="small"
          :show-all-levels="false"
          @change="getTaskId"
        ></el-cascader>
      </div>
      <div class="tableStyle">
        <div id="YmyThree6-1"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quarters: 1,
      // quartersTow: 1,
      quarterArray: [
        {
          id: 1,
          name: "第一季度",
        },
        {
          id: 2,
          name: "第二季度",
        },
        {
          id: 3,
          name: "第三季度",
        },
        {
          id: 4,
          name: "第四季度",
        },
      ],
      quarter: 1,
      quarterList: [
        { id: 1, name: "完成率分数" },
        { id: 2, name: "工作台账分数" },
        { id: 3, name: "负面清单分数" },
        { id: 4, name: "加分项分数" },
        { id: 5, name: "减分项分数" },
      ],
      options: [
        {
          value: "1",
          label: "上半年",
        },
        {
          value: "2",
          label: "下半年",
        },
      ],
      year: "",
      timeNode: "",
      taskLists: [],
      taskId: "",
      taskProp: {
        label: "name",
        value: "id",
        children: "children",
      },
    };
  },
  mounted() {
    // this.dataTable(1);
    this.getTaskList();
  },
  methods: {
    // 各区县得分排名分析展示
    dataAnalysis() {
      this.$axios
        .post("/Ledger/DataAnalysis", { taskId: this.taskId, quarter: this.quarters })
        .then((res) => {
          if (res.code == 200) {
            console.log(res, 888);
            var table1 = this.$echarts.init(
              document.getElementById("YmyThree6-1")
            );
            table1.setOption({
              title: {
                text: "",
                subtext: "",
                left: "center",
              },
              tooltip: {
                trigger: "item",
                formatter: "{b} : {c} ({d}%)",
              },
              legend: {
                orient: "vertical",
                left: "left",
                data: [
                  "工作台账分数",
                  "负面清单分数",
                  "加分项分数",
                  "减分项分数",
                  "完成率分数",
                ],
              },
              series: [
                {
                  name: "",
                  type: "pie",
                  radius: "55%",
                  center: ["50%", "60%"],
                  data: [
                    { value: res.data.ledger, name: "工作台账分数" },
                    { value: res.data.negative, name: "负面清单分数" },
                    { value: res.data.awardPlus, name: "加分项分数" },
                    { value: res.data.reduce, name: "减分项分数" },
                    { value: res.data.baseScore, name: "完成率分数" },
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                  },
                },
              ],
            });
          }
        });
    },
    getTaskList() {
      this.$axios
        .post("/task/getList")
        .then((res) => {
          res.data.map((item) => {
            if (item.children.length == 0) {
              item.children = undefined;
            }
            this.taskLists = res.data;
          });
          this.taskId = res.data[0].id;
          this.dataAnalysis();
        })
        .catch((err) => {});
    },
    getTaskId(val) {
      if(val.length === 1){
        this.taskId = val[0]
      }else{
        this.taskId = val[1]
      }
      this.dataAnalysis();
    },
    getQuartersId(val){
      this.quarters = val
      this.dataAnalysis();
    }
  },
};
</script>
<style lang="less" scoped>
.tableStyle {
  width: 100%;
  height: auto;
  // padding-top: 40px;
  > div {
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
  }
}
.userIntSize {
  width: 20% !important;
}
.el-card {
  margin-bottom: 20px;
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
